<template>
  <nav id="navbar" :class="['fixed w-full z-50 transition-all duration-500 py-4', scrolled ? 'scrolled bg-white shadow-md' : 'bg-transparent']">
    <div class="container mx-auto px-6 md:px-12">
      <div class="flex justify-between items-center">
        <div class="logo-container flex items-center space-x-3">
          <router-link to="/">
            <img src="/同风起.png" alt="同风起科技" class="logo-img h-12 w-auto">
          </router-link>
        </div>
        <div class="hidden md:flex space-x-10">
          <router-link
            v-for="link in navLinks"
            :key="link.to"
            :to="link.to"
            class="nav-link font-medium hover:text-primary transition-all duration-300"
          >
            {{ link.text }}
          </router-link>
        </div>
        <div class="md:hidden">
          <button @click="toggleMobileMenu" class="focus:outline-none">
            <i class="fa fa-bars text-2xl"></i>
          </button>
        </div>
      </div>
    </div>

    <!-- 移动端菜单 -->
    <div v-show="mobileMenuOpen" class="md:hidden bg-white/95 backdrop-blur-sm border-t border-gray-100 shadow-lg">
      <div class="container mx-auto px-6 py-4 space-y-4">
        <router-link
          v-for="link in navLinks"
          :key="link.to"
          :to="link.to"
          class="block py-2 text-dark hover:text-primary font-medium transition-all duration-300"
          @click="closeMobileMenu"
        >
          {{ link.text }}
        </router-link>
      </div>
    </div>
  </nav>
</template>

<script>
export default {
  name: 'Navbar',
  data() {
    return {
      scrolled: false,
      mobileMenuOpen: false,
      navLinks: [
        { to: '/', text: '首页' },
        { to: '/#services', text: '业务服务' },
        { to: '/#cases', text: '案例展示' },
        { to: '/#about', text: '关于我们' },
        { to: '/#contact', text: '联系我们' },
        { to: '/careers', text: '加入我们' }
      ]
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
  },
  beforeUnmount() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.scrolled = window.scrollY > 0
    },
    toggleMobileMenu() {
      this.mobileMenuOpen = !this.mobileMenuOpen
    },
    closeMobileMenu() {
      this.mobileMenuOpen = false
    }
  }
}
</script>

<style scoped>
.logo-img {
  transition: transform 0.3s ease;
}

.logo-img:hover {
  transform: scale(1.05);
}

.nav-link {
  color: #0F3460 !important;
  font-weight: 500;
  font-size: 1.1rem;
  padding: 0.5rem 0;
  position: relative;
  text-decoration: none;
}

.nav-link:hover {
  color: #00379e !important;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #f76400;
  transition: all 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

#navbar.scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  padding: 0.5rem 0;
}
</style>